<template>
	<view style="margin: 20rpx -20rpx;">
		<div class="input-item">
			<image src="/static/password.png" />
			<input class="uni-input" password type="text" v-model="oldPwd" placeholder="请输入旧密码" />
		</div>
		<div class="input-item">
			<image src="/static/password.png" />
			<input class="uni-input" password type="text" v-model="newPwd" placeholder="请输入新密码" />
		</div>
		<div class="input-item" style="border-bottom: 2rpx solid #EEEEEE;">
			<image src="/static/password.png" />
			<input class="uni-input" password type="text" v-model="confirmPwd" placeholder="请输入确认密码" />
		</div>
		<button style="margin: 60rpx 30rpx 0 30rpx;" type="primary" @click="changePwd">修改密码</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldPwd: null,
				newPwd: null,
				confirmPwd: null
			}
		},
		methods: {
			changePwd() {
				if (!this.oldPwd) {
					return uni.showToast({
						title: '请输入旧密码',
						icon: 'none'
					});
				}
				if (!this.newPwd) {
					return uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					});
				}
				if (this.newPwd !== this.confirmPwd) {
					return uni.showToast({
						title: '新密码和确认密码不一致',
						icon: 'none'
					});
				}
				const url =
					`${global.$authHost}api/v1/server/changePsw?memberId=${this.$storage.getUserId()}&oldPassword=${this.oldPwd}&newPassword=${this.newPwd}`;
				uni.request({
					url,
					method: 'POST',
					success: res => {
						if (res.statusCode !== 200 || res.data.code !== 200) {
							uni.showToast({
								title: res.data.data || res.errMsg,
								icon: 'none'
							});
							return;
						}
						uni.showToast({
							title: '密码修改成功',
							icon: 'success'
						});
						this.$storage.removeTenantId();
						this.$storage.removeUserId();
						global.$userName = null;
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}, 1500);
					},
					fail: error => {
						uni.showToast({
							title: error.errMsg || '密码修改失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.input-item {
		background-color: #FFFFFF;
		border-top: 2rpx solid #EEEEEE;
		display: flex;
		align-items: center;
		height: 92rpx;
	}

	.input-item image {
		width: 50rpx;
		height: 50rpx;
		margin: 0 20rpx;
	}

	.input-item .uni-input {
		border: none;
		text-align: left;
		height: 100%;
		padding: 0;
	}
</style>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
